<template>
  <div id="public">
    <!--搜索-->
    <div class="search-content">
      <el-input v-model="order" placeholder="请输入订单编号查询" prefix-icon="el-icon-search" clearable @change="inquiryList" />
      <el-select v-model="status" clearable placeholder="请选择退款状态"  @change="inquiryList" >
        <el-option
          v-for="item in statusList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-date-picker
        v-model="dateTimeRange"
        type="datetimerange"
        range-separator="至"
        clearable
        value-format="yyyy-MM-dd HH-mm-ss"
        @change="inquiryList"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" icon="el-icon-search" @click="inquiryList">查询</el-button>
    </div>
    <!--操作列表-->
    <div class="table">
      <el-table fit :data="tableData" style="width: 100%">
        <el-table-column label="订单编号" prop="orderSn" align="center"/>
        <el-table-column label="退款编号" prop="sn" align="center"/>
        <el-table-column label="退款时间" prop="createDate" width="170" align="center" />
        <el-table-column label="退款金额" prop="money"  align="center"/>
        <el-table-column label="退款状态" prop="refundStatus" width="100" align="center">
          <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.refundStatus==='fail'"  type="info">退款失败</el-tag>
            <el-tag size="small" v-if="scope.row.refundStatus==='success'">退款成功</el-tag>
            <el-tag size="small" v-if="scope.row.refundStatus==='refund'" type="warning">	退款中</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="退款备注" prop="remarks" width="300" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.remarks.length<20">{{scope.row.remarks}}</span>
            <el-tooltip v-else :content="scope.row.remarks" placement="top">
              <span>{{scope.row.remarks.substring(0,19)+"..."}}</span>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10,20,30,40,50]"
          layout="total,sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
  import {Message} from 'element-ui';
import request from "../../utils/request";
  export default {
    name: "RefundOrder",
    data(){
      return{
        // 查询
        order:"",
        status:null,
        statusList:[
          {
            value:0,
            label:'退款中'
          },
          {
            value:1,
            label:'退款成功'
          },
          {
            value:2,
            label:'退款失败'
          }
        ],
        dateTimeRange:[],
        isClearable:true,
        // 列表数据
        tableData:[],
        //详情
        viewDialogVisible:false,
        detailData:{},
        //分页
        currentPage: 1,
        pageSize:10,
        total: 0
      }
    },
    mounted() {
      this.inquiryList();
    },
    methods:{
      isNotNull(value){
        return value !== null && value !== undefined && value !== "";
      },
      //查询列表
      inquiryList(){
        let that=this;
        that.tableData=[];
        let data={
          pageNumber:that.currentPage,
          pageSize:that.pageSize,
          filters:[]
        };
        if(that.isNotNull(that.order)){ //订单编号
          data.filters.push({
            property:"order_sn",
            value:that.order,
            operator: "eq"
          })
        }
        if(that.isNotNull(that.status)){ //退款状态
          data.filters.push({
            property:"refund_status",
            value:that.status,
            operator: "eq"
          })
        }
        if(this.isNotNull(that.dateTimeRange)){ //退款时间
          data.filters.push({
            property:"create_date",
            value:that.dateTimeRange[0],
            operator: "ge"
          });
          data.filters.push({
            property:"create_date",
            value:that.dateTimeRange[1],
            operator: "le"
          })
        }
        request({
          method: 'post',
          url: 'admin/refund/list',
          headers:{
            'Content-Type': 'application/json;charset=UTF-8'
          },
          data:data
        }).then(function (res) {
          if(res.code===200){
            that.total=res.data.total;
            let arr=res.data.records;
            if(arr.length===0){
              that.tableData=[];
            }else{
              that.tableData=arr
            }
          }
        }).catch(function (error) {
          console.log(error);
        });
      },
      //详情
      dealwithView(index,row){
        this.detailData=row;
        this.viewDialogVisible=true;
      },
      // 改变每页显示的数量
      handleSizeChange(val) {
        this.pageSize=val;
        this.inquiryList();
      },
      //改变当前页
      handleCurrentChange(val) {
        this.currentPage=val;
        this.inquiryList();
      }
    }
  }
</script>

<style scoped src="../../assets/css/publicCss/publicStyle.css">

</style>
